<template>
    <el-card class="content">
        <el-form :inline="true">
            <el-form-item label="行政区域">
                <el-select v-model="region"></el-select>
            </el-form-item>
            <el-form-item label="隐患排查点">
                <el-select v-model="checkpoint"></el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-warp">
            <el-table stripe :data="checkList.slice(currentPage*pageSize,(currentPage+1)*pageSize)">
                <el-table-column label="隐患点排查" prop="site" align="center"></el-table-column>
                <el-table-column label="具体位置" prop="address" align="center"></el-table-column>
                <el-table-column label="巡查时间" prop="checkTime" align="center"></el-table-column>
                <el-table-column label="巡查记录" align="center">
                    <template slot-scope="scope">
                        <el-button v-show="!scope.row.status" type="danger" size="medium" class="long-btn">异常</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="附件" align="center">
                    <template slot-scope="scope">
                        <el-button v-show="!scope.row.status" type="primary" size="medium" plain>上传</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="整改情况" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.status" type="danger" size="medium" class="long-btn" @click="scope.row.status=true">未整改</el-button>
                        <el-button v-else type="success" size="medium" class="long-btn">已整改</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="附件" align="center">
                    <template slot-scope="scope">
                        <el-button v-show="!scope.row.status" type="primary" size="medium" plain>上传</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="经办人" align="center"></el-table-column>
                <el-table-column label="审核记录" align="center"></el-table-column>
            </el-table>
        </div>
        <div class="page-pagination-warp">
            <el-pagination
                    @current-change="pageChange"
                    layout="total, jumper, ->, prev, pager, next"
                    :total="checkList.length"
                    :page-size="pageSize"
                    :pager-count="7" background>
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
    export default {
        name: "CheckStatistics",
        data(){
            return{
                checkList:[
                    {site:'西宁南山',address:'三明市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁大通',address:'龙岩市',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'西宁南山',address:'龙岩市',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'西宁大通',address:'泉州市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁大通',address:'三明市',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'西宁南川东路',address:'泉州市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁南山',address:'泉州市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁大通',address:'三明市',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'西宁大通',address:'三明市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁南川东路',address:'龙岩市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁南川东路',address:'龙岩市',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'西宁南川东路',address:'龙岩市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁南川东路',address:'泉州市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'西宁南川东路',address:'泉州市',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:false},
                    {site:'****站点1',address:'*********',checkTime:'2020-09-09 09:18:17',status:true},
                ],
                pageSize:10,
                currentPage:0,
                region:'',
                checkpoint:'',
            }
        },methods:{
            pageChange(index){
                this.currentPage=index-1;
            }
        }
    }
</script>

<style scoped>
    .content {
        height: 87vh;
        margin-right: 5px;
    }
    .long-btn{
        width: 150px;
    }
    .page-pagination-warp{
        margin-top: 5px;
    }
    .table-warp{
        height: 71vh;
    }
</style>